{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}琢越网{% endblock %}

{% block custom_js %}<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>{% endblock %}
{% block custom_css %}<link rel="stylesheet" href="{% static 'css/mystyle.css' %}">{% endblock %}

{% block content %}
	<div class="row clearfix">
		<div class="col-md-1 column">  <!次导航>
			<ul class="nav nav-pills">
				<li >
					<a href="{% url 'topic:topic_edit' %}">发起话题</a>
				</li>
				<li class="active">
					<a href="#">编辑笔记</a>
				</li>
				<li >
					<a href="#" >我的笔记</a>
				</li>
				<li >
					<a href="#" >我的话题</a>
				</li>
			</ul>
		</div>
		<div id="middleBox" class="col-md-10 column col-div"> <!编辑笔记区>
			<form action="{% url 'note:note_edit_action' %}" method="post" class="form-horizontal" role="form">
				{% csrf_token %}
                <h4 class="text-center" style="font-weight:bold">编辑笔记</h4>
				<hr>
				<div class="form-group"> <!标题>
					 <label for="title" class="col-sm-2 control-label">标题：</label>
					<div class="col-sm-4">
						<input name=title id="title" class="form-control"  placeholder="笔记标题"/>
					</div>
				</div>
				<br>
				<div class="form-group"> <!标签>
					<label class="col-sm-2 control-label">标签：</label>
					<div class="col-scroll col-sm-9 pre-scrollable">
						{% for label in labels %}
						<label class="label-padding col-checkbox">
                            <input name="label" type="checkbox" value="{{ label.label_content }}"/>{{ label.label_content }}
                        </label>
                        {% endfor %}
					</div>
				</div>
				<br>
				<div class="form-group"> <!工具栏>
					<div class="col-sm-offset-3 col-sm-9">
						<div class="btn-group btn-group-sm"> <!工具栏1>
							<button id="bold" class="btn btn-default" type="button">
								<em class="glyphicon glyphicon-bold"></em>
							</button> 
							<button id="italic" class="btn btn-default" type="button">
								<em class="glyphicon glyphicon-italic"></em>
							</button> 
							<button id="line" class="btn btn-default" type="button">
								<em class="glyphicon glyphicon-text-color "></em>
							</button> 
						</div>
						<div class="btn-group btn-group-sm"> <!工具栏2>
							<button id="header" class="btn btn-default" type="button">
								<em class="glyphicon glyphicon-header"></em>
							</button> 
							<button class="btn btn-default" type="button">
								<em class="glyphicon glyphicon-list"></em>
							</button> 
							<button id="block" class="btn btn-default" type="button">
								<em class="glyphicon glyphicon-chevron-down "></em>
							</button>
							<button class="btn btn-default" type="button">
								<em class="glyphicon glyphicon-picture"></em>
							</button>
							<button class="btn btn-default" type="button">
								<em class="glyphicon glyphicon-facetime-video"></em>
							</button>
						</div>
						<div class="btn-group btn-group-sm"> <!工具栏3>
							<button id="left" class="btn btn-default" type="button">
								<em class="glyphicon glyphicon-align-left"></em>
							</button>
							<button id="center" class="btn btn-default" type="button">
								<em class="glyphicon glyphicon-align-center"></em>
							</button>
							<button id="right" class="btn btn-default" type="button">
								<em class="glyphicon glyphicon-align-right"></em>
							</button>
							<button id="justify" class="btn btn-default" type="button">
								<em class="glyphicon glyphicon-align-justify"></em>
							</button>
						</div>						
						<div class="btn-group btn-group-sm">	<!工具栏4>					
							<button id="arrow-left" class="btn btn-default" type="button">
								<em class="glyphicon glyphicon-arrow-left "></em>
							</button>
							<button id="arrow-right" class="btn btn-default" type="button">
								<em class="glyphicon glyphicon-arrow-right"></em>
							</button>
							<button id="trash" class="btn btn-default" type="button">
								<em class="glyphicon glyphicon-trash"></em>
							</button>
						</div>
					</div>
				</div>
				<div class="form-group"> <!正文>
					 <label for="text" class="col-sm-2 control-label">正文：</label>
					<div class="col-sm-9 ">
						<textarea name=content id="text" class="form-control" style="height:400px;"  placeholder="笔记正文" id="introduction"></textarea>
					</div>
				</div>
				<div class="form-group"> <!按钮>
					<div class="col-sm-offset-3 col-sm-1">
						 <button onclick="validSubmit()" type="submit" class="btn btn-default">提交</button>
					</div>
					<div class="col-sm-2">
						 <a onclick="validSave()" type="button" style="color:gray">保存至草稿箱</a>
					</div>
					<div class="col-sm-offset-2 col-sm-4">
						 <button id="cancel" type="button" class="btn btn-default">取消</button>
					</div>
				</div>			
			</form>				
		</div>
			
	</div>	
{% endblock %}
{% block custom_script %}
<script>
//对文本样式的处理
	$(document).ready(function(){
		// 清空文本框
		var text = $("#text");
		$("#cancel").click(function(){			
			$("#title").val("");
			text.val("");
		});
		$("#trash").click(function(){
			text.val("");
		});
		// 居中
		$("#text").select(function(){
			var a= $("#text").find("option:selected").text();
			var b=$("#ddlregtype ").val();
			console.log(a);console.log(b);
			
		});
		$("#center").click(function(){
			var a=text.select();
			text.css("text-align","center");
		});
		// 左居
		$("#left").click(function(){
			text.css("text-align","left");
		});
		// 右居
		$("#right").click(function(){
			text.css("text-align","right");
		});
		// 齐行 ？？？？
		$("#justify").click(function(){
			text.css("text-align","justify");
		});
		// 加粗
		$("#bold").click(function(){
			if( text.css("font-weight")=="400" )
				text.css("font-weight","bold");
			else
				text.css("font-weight","400");				
		});
		// 斜体
		$("#italic").click(function(){
			if( text.css("font-style")=="oblique" )
				text.css("font-style","normal");
			else
				text.css("font-style","oblique");				
		});
		// 设为标题
		$("#header").click(function(){
			//console.log(text.css("font-size"));
			if( text.css("font-weight")=="400" ){
				text.css("font-weight","bold");
				text.css("font-size","16px");
			}
			else{
				text.css("font-weight","400");	
				text.css("font-size","14px");	
			}
		});
		// 下划线
		$("#line").click(function(){
			if( text.css("text-decoration")=="underline" )
				text.css("text-decoration","none");
			else
				text.css("text-decoration","underline");
		});
		// 加阴影
		$("#block").click(function(){
			console.log(text.css("background-color"));
			if( text.css("background-color")=="rgb(247, 247, 247)" )
				text.css("background-color","white");
			else
				text.css("background-color","rgb(247, 247, 247)");
			
		});
	});
	var title = document.getElementById('title'); 
	var text = document.getElementById('text');
// 判断提交是否有效
      function validSubmit(){    
        if ( title.value == ''){
			alert("请输入标题!");
			return false ;  
        }  
		if ( text.value == ''){  
			alert("请输入正文!");  
			return false ;  
        }
       }  
// 判断保存到草稿箱是否有效（信息全空不保存！）
      function validSave(){  
        if ( title.value == '' && text.value == ''){
			alert("不能保存空白信息!");
			return false ;  
        }  
		else{  
			alert("保存成功!");  
			return true ;  
        }  
       }     
   
</script>
{% endblock %}
